<!--预览-->
<nz-modal [(nzVisible)]="visible" nzTitle="预览" nzWidth="1040px" (nzOnCancel)="hidePreviewModal()">
  <div *nzModalContent>
    <!--    基础信息-->
    <div>
      <div class="flexRow">
        <label>品牌:</label>
        <span>{{copyFormData.brandName}}</span>
      </div>
      <div class="flexRow">
        <label>系列:</label>
        <span>{{copyFormData.departmentName}}</span>
      </div>
      <div class="flexRow">
        <label>机型:</label>
        <span>{{copyFormData.typeName}}</span>
      </div>
      <div class="flexRow">
        <label>估价模版:</label>
        <span>{{copyFormData.templateName}}</span>
      </div>
      <div class="flexRow">
        <label>内部备注:</label>
        <span>{{copyFormData.remark}}</span>
        <span *ngIf="mABP.checked">
        <span style="margin-left: 8px" *ngIf="!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>
        <span style="margin-left: 8px" *ngIf="fixedPriceResult.isFixedPrice">{{fixedPriceResult.price}}</span>
        </span>
      </div>
      <div class="flexRow">
        <label>基准:</label>{{questionIdToName(baseQuestion['questionId'], questionList)}}
      </div>
      <nz-table nzShowPagination="false"
        #table [nzData]="baseQuestion['options']" *ngIf="baseQuestion.options.length" style="margin-top: 8px">
        <thead>
        <tr>
          <th>选项名称</th>
          <th>二手基准价</th>
          <th>二手保底价</th>
          <th>准新基准价</th>
          <th>准新保底价</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let o of table.data" style="margin-top: 8px">
          <td style="max-width:400px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{optionIdToName(o['id'])}}</td>
          <td>{{o['usedPriceInfo']['basePrice']}}</td>
          <td>
            {{o['usedPriceInfo']['type'] === 'percentage' ? '百分比：&nbsp;&nbsp;&nbsp;' + o['usedPriceInfo']['price'] + '%' : '固定金额：' + o['usedPriceInfo']['price']}}
            <span class="preview" *ngIf="o['usedPriceInfo']['type']==='percentage'">
            ({{priceToFloor(o['usedPriceInfo']['basePrice'], o['usedPriceInfo']['price'])}})
          </span>
          </td>
          <td>{{o['newPriceInfo']['basePrice']}}</td>
          <td>
            {{o['newPriceInfo']['type'] === 'percentage' ? '百分比：&nbsp;&nbsp;&nbsp;' + o['newPriceInfo']['price'] + '%' : '固定金额：' + o['newPriceInfo']['price']}}
            <span class="preview" *ngIf="o['newPriceInfo']['type']==='percentage'">
            ({{priceToFloor(o['newPriceInfo']['basePrice'], o['newPriceInfo']['price'])}})
          </span>
          </td>
        </tr>
        </tbody>
      </nz-table>
      <!--      <div class="flexRow">-->
      <!--        <label>二手基准价:</label>-->
      <!--        <span>￥{{copyFormData.usedBasePrice}}</span>-->
      <!--      <span style="margin-left: 8px" *ngIf="!isNewDevice&&!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>-->
      <!--      <span style="margin-left: 8px" *ngIf="fixedPriceResult.isFixedPrice">一口价：{{fixedPriceResult.price}}</span>-->
      <!--      </div>-->
      <!--      <div class="flexRow">-->
      <!--        <label>准新基准价:</label>-->
      <!--        <span>￥{{copyFormData.newBasePrice}}</span>-->
      <!--      <span style="margin-left: 8px" *ngIf="isNewDevice&&!fixedPriceResult.isFixedPrice">{{assessPriceText}}</span>-->
      <!--      <span style="margin-left: 8px" *ngIf="fixedPriceResult.isFixedPrice">一口价：{{fixedPriceResult.price}}</span>-->
      <!--      </div>-->
    </div>

    <div class="question" *ngFor="let question of copyQuestionList;let questionIndex=index">
      <div *ngIf="question.show">
        <div class="title" (click)="changeFold(question)">
          <span class="name">{{calcQuestionIndex(questionIndex)}}.{{question.questionName}}
            <span *ngIf="question.isRequired" style="color: red">*</span></span>
          <span class="result">{{getResult(question)}}</span>
          <i class="changeFoldBtn" nz-icon [nzType]="question.optionsFold?'right':'down'" nzTheme="outline"></i>
        </div>
        <div class="optionSingle" [ngStyle]="{display: question.optionsFold?'none':'block'}"
             *ngIf="question.selectType===0">
          <nz-radio-group [(ngModel)]="question.value" class="optionRow" *ngFor="let option of question.options"
                          (ngModelChange)="singleChecked(questionIndex,$event)">
            <label nz-radio [nzDisabled]="!option.selectAble" [nzValue]="option.id">
              <div style="display: flex;flex-direction: row;align-items: center">
              <span
                style="display: inline-block;width: 400px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
              {{option.optionName}}
                <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                   nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                   nzTheme="outline"></i>
              </span>
                <span *ngIf="isNewDevice&&mABP.checked">
                    {{option['newPriceInfo']['type'] === 'percentage' ?
                  '准新扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['newPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['newPriceInfo']['price']) + ')' :
                  '准新扣钱固定金额：' + option['newPriceInfo']['price']}}
              </span>
                <span *ngIf="!isNewDevice&&mABP.checked">
                    {{option['usedPriceInfo']['type'] === 'percentage' ?
                  '二手扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['usedPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['usedPriceInfo']['price']) + ')' :
                  '二手扣钱固定金额：' + option['usedPriceInfo']['price']}}
              </span>
                <span *ngIf="!mABP.checked">未选中基准价，无法预测价格。</span>
              </div>
              <span style="color: red" *ngIf="!option.selectAble"> 不可选原因：{{option.invalidCause}}</span>
              <div *ngIf="option['questionId']" style="color: rgba(0,0,0,.3)">
                选择此项后跳转到：{{questionIdToName(option['questionId'], copyQuestionList)}}</div>
            </label>
          </nz-radio-group>
        </div>
        <div class="optionMultiple" [ngStyle]="{display: question.optionsFold?'none':'block'}"
             *ngIf="question.selectType===1">
          <div class="optionRow" *ngFor="let option of question.options">
            <label nz-checkbox [(ngModel)]="option.checked" [nzDisabled]="!option.selectAble"
                   (ngModelChange)="multipleChecked(questionIndex)">
              <div style="display: flex;flex-direction: row;align-items: center">
              <span
                style="display: inline-block;width: 400px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden">
              {{option.optionName}}
                <i *ngIf="option.optionRemark||option.optionImages.length" style="margin-right: 8px" nz-icon
                   nzType="question-circle" (click)="showOptionRemarkModal(question,option,$event)"
                   nzTheme="outline"></i>
              </span>
                <span *ngIf="isNewDevice&&mABP.checked">
                    {{option['newPriceInfo']['type'] === 'percentage' ?
                  '准新扣钱百分比：&nbsp;&nbsp;&nbsp;' + option['newPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['newPriceInfo']['price']) + ')' :
                  '准新扣钱固定金额：' + option['newPriceInfo']['price']}}
              </span>
                <span *ngIf="!isNewDevice&&mABP.checked">
                    {{option['usedPriceInfo']['type'] === 'percentage' ?
                  '二手扣钱百分比：' + option['usedPriceInfo']['price'] + '%' + ' (' + priceToFloor(mABP.basePrice, option['usedPriceInfo']['price']) + ')' :
                  '二手扣钱固定金额：' + option['usedPriceInfo']['price']}}
              </span>
                <span *ngIf="!mABP.checked">未选中基准价，无法预测价格。</span>
              </div>
              <span style="color: red" *ngIf="!option.selectAble"> 不可选原因：{{option.invalidCause}}</span></label>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div *nzModalFooter>
    <!--    <span style="margin-right: 12px">{{assessPriceText}}</span>-->
    <button nz-button nzType="default" (click)="hidePreviewModal()">取消</button>
    <!--    <button nz-button nzType="primary" *ngIf="allRequiredIsChecked()" (click)="calcPrice()">立即估价</button>-->
  </div>
</nz-modal>
